import React, { lazy, Suspense } from 'react';
import BlankLayout from '../layouts/BlankLayout';
import { Redirect, Link } from 'react-router-dom';
import loading from '../assets/images/loading.gif'
import LoadingIcon from '../components/LoadingIcon/LoadingIcon.jsx'
const Main = lazy(()=> import('../pages/Main/Main'));
const Server= lazy(()=> import('../pages/server/Server'));
const Info= lazy(()=> import('../pages/info/Info'));
const My= lazy(()=> import('../pages/my/My.jsx'));
const Detail= lazy(()=> import('../pages/detail/Detail.jsx'));
const SingerDetail= lazy(()=> import('../pages/singerdetail/SingerDetail.jsx'));
const Search= lazy(()=> import('../pages/search/Search.jsx'));
const SearchDetail= lazy(()=> import('../pages/searchDetail/searchDetail.jsx'));

import Tabbuttom from '../components/tabbuttom/Tabbuttom';

const SuspenseComponent = Component => props => {
    return (
        <Suspense fallback={<LoadingIcon/>}>
            <Component {...props}></Component>
        </Suspense>
    )
}

export default [{
    component: BlankLayout,
    routes:[
        {
            path:'/',
            exact: true,
            render: () => < Redirect to = { "/home" }/>,
        },
        {
            path:'/home',
            component: Tabbuttom,
            routes: [
                {
                    path: '/home',
                    exact: true,
                    render: () => < Redirect to = { "/home/main" }
                    />,
                },
                {
                    path: '/home/main',
                    component: SuspenseComponent(Main),
                   
                },
                {
                    path:'/home/mv',
                    component:SuspenseComponent(Server),
                },
                {
                    path:'/home/community',
                    component:SuspenseComponent(Info),
                },
                {
                    path:'/home/my',
                    component:SuspenseComponent(My),
                },
                

            ],
            

        },
        {
            path:'/album/:id',
            component: SuspenseComponent(Detail),
            // routes: [
            //     {
            //         path: '/home/main/album/:id',
            //         component: SuspenseComponent(Detail)
            //     }
            // ]
        },
        {
            path:'/singer/:id',
            component: SuspenseComponent(SingerDetail),
            
        },
        {
            path:'/search',
            component: SuspenseComponent(Search),
            // routes: [
            //     {
            //         path: '/home/main/album/:id',
            //         component: SuspenseComponent(Detail)
            //     }
            // ]
        },
        {
            path:'/searchDetail/:id',
            component: SuspenseComponent(SearchDetail),
            
        },

    ]
}]

